<template>
  <div class="create-device">
    <el-dialog title="新建设备" :close-on-click-modal="false" :visible.sync="visible" :before-close="handleClose">
      <el-form ref="queryForm" inline :model="formData" label-position="left" label-width="80px">
        <el-form-item label="">
          <el-input v-model="formData.name" placeholder="设备名" clearable />
          <el-input v-model="formData.remarkName" placeholder="备注名称" clearable />
          <el-input v-model="formData.productId" placeholder="所属产品" clearable />
          <el-input v-model="formData.parentId" placeholder="父级设备" clearable />
          <el-input v-model="formData.onlineState" placeholder="启用状态" clearable />
          <el-input v-model="formData.remark" placeholder="备注说明" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="loading" type="primary" size="small" @click="handleSubmit">
          提交
        </el-button>
        <el-button size="small" @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { apiAddDevice } from '../api'

  export default {
    name: 'CreateDevice',
    props: {
      visible: { type: Boolean, require: true, default: false }
    },
    data() {
      return {
        loading: false,
        formData: {
          name: '',
          remarkName: '',
          remark: '',
          productId: '',
          onlineState: '',
          parentId: ''
        }
      }
    },
    methods: {
      handleSubmit() {
        this.addDevice(this.formData)
      },
      handleClose() {
        this.$emit('update:visible', false)
      },
      async addDevice(formData) {
        try {
          await apiAddDevice(formData)
          this.$message.success('新增成功！')
          this.handleClose()
          this.$emit('create-success')
        } catch (msg) {
          this.$message.error(msg)
        }
      }
    }
  }
</script>

<style scoped></style>
